<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %>
<!DOCTYPE html>
<html>
<head>
    <title>食堂点餐系统 | 控制面板</title>
    <jsp:include page="../includes/header.jsp"/>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

    <jsp:include page="../includes/nav.jsp"/>

    <jsp:include page="../includes/menu2.jsp"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>用户列表</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">主页</a></li>
                            <li class="breadcrumb-item active">用户管理</li>
                            <li class="breadcrumb-item active">用户列表</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
            <div class="container-fluid">
                <div class="row form-horizontal">
                    <div class="col-md-12 offset-md-1">
                        <form:form cssClass="form-horizontal" action="/user/search" method="post" modelAttribute="tbUser">
                            <form:hidden path="id" />
                            <div class="row">
                                <div class="col-md-12 offset-md-1">
                                    <div class="input-group">
                                        <label for="username">姓名：</label>
                                        <div class="input-group-append">
                                            <form:input path="username" cssClass="btn btn-sm btn-default" placehole="姓名"/>
                                        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <label for="email">邮箱：</label>
                                        <div class="input-group-append">
                                            <form:input path="email" cssClass="btn btn-sm btn-default" placehole="邮箱"/>
                                        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <label for="phone">手机号：</label>
                                        <div class="input-group-append">
                                            <form:input path="phone" cssClass="btn btn-sm btn-default" placehole="手机号"/>
                                        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <div class="input-group-append">
                                            <button type="button" class="fa fa-search" onclick="search()">搜索</button>
                                        </div>
                                        <div class="input-group-append">
                                            <button type="button" class="dropdown-item" style="color:red;" onclick="App.deleteMulti();">删除</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form:form>
                </div>
            </div>
            </div>
        </section>
        <section>
        <div class="card-body align-content-center">
            <table id="dataTable" class="table">
                <thead>
                <tr>
                    <th><input id="${tbUser.id}" type="checkbox" class="minimal icheck_master"/></th>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
<%--                <c:forEach items="${tbUsers}" var="tbUser">--%>
<%--                    <td>--%>
<%--                    <td>${tbUser.id}</td>--%>
<%--                    <td>${tbUser.username}</td>--%>
<%--                    <td>${tbUser.phone}</td>--%>
<%--                    <td>${tbUser.email}</td>--%>
<%--                    <td></td>--%>
<%--                    <td>--%>
<%--                        <div class="btn-group">--%>
<%--                            <button type="button" class="btn btn-info">操作</button>--%>
<%--                            <button type="button" class="btn btn-info dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">--%>
<%--                                <span class="sr-only"></span>--%>
<%--                            </button>--%>
<%--                            <div class="dropdown-menu" role="menu">--%>
<%--                                <a class="dropdown-item" style="color:blue;" href="#">查看</a>--%>
<%--                                <a class="dropdown-item" style="color:blue;" href="#">编辑</a>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </td>--%>
<%--                    </tr>--%>
<%--                </c:forEach>--%>
                </tbody>
            </table>
        </div>
        </section>
        <!-- /.content-wrapper -->
    </div>

    <jsp:include page="../includes/copyright.jsp"/>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>

<!-- ./wrapper -->
<jsp:include page="../includes/footer.jsp"/>

<!-- 自定义模态框 -->
<sys:modal/>

<script>
    var _dataTable;

   $(function () {
       var _columns = [
           {
               "data": function (row, type, val, meta) {
                   return '<input id="' + row.id + '" type="checkbox" class="minimal" />';
               }
           },
           {"data": "id"},
           {"data": "username"},
           {"data": "phone"},
           {"data": "email"},
           {"data": "updated"},
           {
               "data": function (row,type,val,meta) {
                   var detailUrl = "/user/detail?id=" + row.id;
                   return '<div class="btn-group"> '+
                       '<button type="button" class="btn btn-default btn-flat">操作</button> '+
                       '<button type="button" class="btn btn-default btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown"></button>' +
                       '<div class="dropdown-menu" role="menu">' +
                       '<a class="dropdown-item" href="/user/form?id='+row.id+'">编辑</a>' +
                       '<button class="dropdown-item" style="color:blue;" onclick="App.showDetail(\''+detailUrl+'\')">查看</button>' +
                       '</div>'

               }
           }
       ];
       _dataTable = App.initDataTables("/user/page",_columns);

   });
   
   function search() {
       var username = $("#username").val();
       var email = $("#email").val();
       var phone = $("#phone").val();


       var param = {
           "username": username,
           "email":email,
           "phone":phone
       };
       _dataTable.settings()[0].ajax.data = param;
       _dataTable.ajax.reload();
   };

   $(function () {
       var _checkbox = App.getCheckbox();
       _checkbox.each(function () {
          console.log($(this).attr("id"));
       });
   })
</script>
</body>
</html>


